<div
  id="J_NewFolder"
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
  v-kb-modal="visible"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" @click="reset"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title"
          >{{ Kooboo.text.component.folderEditor.folder }}</h4
        >
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs">
          <li class="active">
            <a data-toggle="tab" href="#tab_basic" @click="changeTab('basic')"
              >{{ Kooboo.text.component.folderEditor.basicInfo }}</a
            >
          </li>
          <li>
            <a
              data-toggle="tab"
              href="#tab_relation"
              @click="changeTab('relation')"
              >{{ Kooboo.text.component.folderEditor.relationFolders }}</a
            >
          </li>
        </ul>
        <div class="tab-content margin-top-20">
          <section class="tab-pane fade active in" id="tab_basic">
            <kb-form
              :model="basicForm"
              :rules="basicFormRules"
              ref="basicForm"
              :error-visible="showError.basic"
            >
              <kb-form-item prop="name" error-container=".name-error-container">
                <label class="control-label col-md-3"
                  >{{ Kooboo.text.common.name }}</label
                >
                <div class="col-md-9">
                  <p v-if="!isNew" class="form-control-static"
                    >{{ basicForm.name }}</p
                  >
                  <template v-else>
                    <input
                      class="form-control"
                      v-model="basicForm.name"
                      id="Name"
                      name="Name"
                      type="text"
                    />
                    <div
                      class="error-container name-error-container"
                      style="position: absolute; width: 150%"
                    ></div>
                  </template>
                </div>
              </kb-form-item>
              <kb-form-item prop="displayName">
                <label class="control-label col-md-3"
                  >{{ Kooboo.text.component.folderEditor.displayName }}</label
                >
                <div class="col-md-9">
                  <input
                    class="form-control"
                    v-model="basicForm.displayName"
                    id="DisplayName"
                    name="DisplayName"
                    type="text"
                  />
                </div>
              </kb-form-item>
              <kb-form-item
                prop="contentTypeId"
                error-container=".content-type-error-container"
              >
                <label class="control-label col-md-3"
                  >{{ Kooboo.text.common.ContentType }}</label
                >
                <div class="col-md-9">
                  <p v-if="hasContentType" class="form-control-static"
                    >{{ contentTypeName }}</p
                  >
                  <template v-else>
                    <select
                      class="form-control"
                      v-model="basicForm.contentTypeId"
                    >
                      <option v-for="item in contentTypes" :value="item.id">
                        {{ item.name }}
                      </option>
                    </select>
                  </template>
                  <div
                    class="error-container content-type-error-container"
                    style="position: absolute; width: 150%"
                  ></div>
                </div>
              </kb-form-item>
            </kb-form>
          </section>
          <section class="tab-pane fade" id="tab_relation">
            <kb-form
              simple
              :error-visible="showError.relation"
              class="form-horizontal"
              :model="relationForm"
              :rules="relationFormRules"
              ref="relationForm"
            >
              <div class="form-group">
                <label class="control-label col-md-3"
                  >{{ Kooboo.text.component.folderEditor.categoryFolders
                  }}</label
                >
                <div class="col-md-9">
                  <div class="input-groups">
                    <kb-form-item
                      v-for="($data, $index) in relationForm.categoryFolders"
                      :prop="'categoryFolders['+ $index +'].alias'"
                      :key="$index"
                    >
                      <template v-slot="error">
                        <div
                          class="input-group"
                          :class="{'has-error': !!error.error}"
                          v-kb-tooltip:right.manual.error="error.error"
                          :data-container="'.category-error-container-' + $index"
                        >
                          <select
                            class="form-control key"
                            v-model="$data.folderId"
                          >
                            <option
                              v-for="item in availableFolders($data.folderId)"
                              :value="item.id"
                            >
                              {{ item.displayName }}
                            </option>
                          </select>
                          <span class="input-group-addon">
                            <span class="checkbox">
                              <label
                                ><input
                                  type="checkbox"
                                  v-model="$data.multiple"
                                  :disabled="!$data.enableMultiple"
                                />
                                {{ Kooboo.text.component.folderEditor.multiple
                                }}
                              </label>
                            </span>
                          </span>
                          <span class="input-group-btn">
                            <a
                              class="btn btn-default"
                              href="javascript:;"
                              @click="removeCategoryFolders($data)"
                              v-kb-tooltip="Kooboo.text.common.remove"
                            >
                              <i class="fa fa-minus"></i>
                            </a>
                          </span>
                          <input
                            class="form-control"
                            v-model="$data.alias"
                            :placeholder="Kooboo.text.component.folderEditor.alias"
                            type="text"
                          />
                          <div
                            class="error-container"
                            :class="'category-error-container-' + $index"
                            style="position: absolute; width: 150%"
                          ></div>
                        </div>
                      </template>
                    </kb-form-item>
                    <a
                      v-if="ableToAddRelationFolder"
                      class="btn dark"
                      href="javascript:;"
                      @click="addCategoryFolders"
                      v-kb-tooltip:right="Kooboo.text.common.add"
                      ><i class="fa fa-plus"></i
                    ></a>
                    <p
                      v-else-if="relationForm.categoryFolders.length == 0"
                      class="form-control-static"
                      >{{ Kooboo.text.component.folderEditor.noFolderAvailable
                      }}</p
                    >
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-md-3"
                  >{{ Kooboo.text.component.folderEditor.EmbeddedFolders
                  }}</label
                >
                <div class="col-md-9">
                  <div class="input-groups">
                    <kb-form-item
                      v-for="($data, $index) in relationForm.embeddedFolders"
                      :prop="'embeddedFolders['+ $index +'].alias'"
                      :key="$index"
                    >
                      <template v-slot="error">
                        <div
                          class="input-group"
                          :class="{'has-error': !!error.error}"
                          v-kb-tooltip:right.manual.error="error.error"
                          :data-container="'.embedded-error-container-' + $index"
                        >
                          <select
                            class="form-control key"
                            v-model="$data.folderId"
                          >
                            <option
                              v-for="item in availableFolders($data.folderId)"
                              :value="item.id"
                            >
                              {{ item.displayName }}
                            </option>
                          </select>
                          <span class="input-group-addon"></span>
                          <span class="input-group-btn">
                            <a
                              class="btn btn-default"
                              href="javascript:;"
                              @click="removeEmbeddedFolders($data)"
                              v-kb-tooltip="Kooboo.text.common.remove"
                            >
                              <i class="fa fa-minus"></i>
                            </a>
                          </span>
                          <input
                            class="form-control"
                            :placeholder="Kooboo.text.component.folderEditor.alias"
                            v-model="$data.alias"
                            type="text"
                          />
                          <div
                            class="error-container"
                            :class="'embedded-error-container-' + $index"
                            style="position: absolute; width: 150%"
                          ></div>
                        </div>
                      </template>
                    </kb-form-item>
                    <a
                      v-if="ableToAddRelationFolder"
                      class="btn dark"
                      href="javascript:;"
                      @click="addEmbeddedFolders"
                      v-kb-tooltip:right="Kooboo.text.common.add"
                      ><i class="fa fa-plus"></i
                    ></a>
                    <p
                      v-else-if="relationForm.embeddedFolders.length == 0"
                      class="form-control-static"
                      >{{ Kooboo.text.component.folderEditor.noFolderAvailable
                      }}</p
                    >
                  </div>
                </div>
              </div>
            </kb-form>
          </section>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn green" @click="submit"
          >{{ Kooboo.text.common.save }}</button
        >
        <button class="btn gray" @click="reset"
          >{{ Kooboo.text.common.cancel }}</button
        >
      </div>
    </div>
  </div>
</div>
